<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello React</title>
</head>
<body>

  <div id="root"></div>

  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/babel.js"></script>
  
  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          message: "hello world",
          title: "这是title",
          imgUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
          href: 'https://www.baidu.com',

          isActive: false,
        }
      }
      render() {
        const { message, title, imgUrl, href, isActive } = this.state

        // 1. 动态绑定class1(字符串拼接)
        const className = `class1 ${isActive?'active' :''}`
        // 2. 动态绑定class2(数组)
        const classList = ['class1', 'class2']
        if(isActive) classList.push('active')
        // 3. 第三方库classnames

        const styleObj = {color: 'red', fontWeight: '700'}
        return (
          <div>
            {/* 1. 基本绑定 */}
            <h2 title={ title }>{ message }</h2>
            <img src={ imgUrl } alt="" />
            <a href={ href }>百度一下</a>
            {/* 2. class的绑定 */}
            <div className="class1">class的绑定</div>
            <div className={className}>动态绑定class1</div>
            <div className={classList.join(" ")}>动态绑定class2</div>
            {/* 3. style的绑定,绑定对象类型 */}
            <div style={styleObj}>动态绑定style2</div>
            <div style={{color: 'red', fontWeight: '700'}}>动态绑定style1</div>
          </div>
        )
      }
    }
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App />)
  </script>
</body>
</html>